vue2.x搭建项目 | 您所在的位置:网站首页 › angularjs ts文件 › vue2.x搭建项目 |
创建一个vue项目: 1,全局安装vue命令行模块 vue-cli npm install vue-cli -g 注意:vue-cli 依赖于webpack,在使用vue-cli之前,先安装webpack npm install webpack -g 2,创建项目文件夹,并在这个文件夹下打开命令行 3,初始化一个vue项目 vue init webpack 项目名称 注意: 其中Eslint 选项是代码格式校验工具, 要选择NO ,否则会以严格模式校验代码, 如: 注释//后必须有且只有一个空格, 否则会报错 4,下载安装所有的依赖项 npm install 5,启动项目 npm run dev 在vue项目根目录下,index.html就是项目的首页,其他文件是项目的各种配置文件。 static文件夹,是存储静态资源文件的静态文件夹(类似于express项目中的public) src文件夹,是存储项目源代码的文件夹(类似express项目中的bin),所有前端的代码文件都存储在src中。 build文件夹,用于存放webpack项目打包的配置文件。 config文件夹,存放服务器的配置文件。 除了src文件夹,其他文件夹中的内容基本不用修改。 开发vue项目,主要就是在src中写代码。 6,当项目完成时,如何打包发布? (1)打包:项目开发完成之后,代码行执行命令 npm run build 编译并重新构建项目,然后在项目目录下生成一个 dist 文件夹 (2)发布: 只需要将dist文件夹中的所有内容复制到服务器(IIS / node / apache)的静态文件夹中即可 总结几种服务器的创建和启动方式 1, 基础服务器 npm init 初始化 node index 启动 2, express项目生成器 express myProject 初始化 npm start 启动 3, vue1.x/2.x项目框架 vue init webpack 初始化 npm run dev 启动 4, vue3.x/4.x/5.x项目框架 vue create project-name 初始化 npm run serve 启动 5, react项目框架 create-react-app my-app初始化 npm start 启动 6, angular框架项目 ng new app-name初始化 ng serve 启动 |
CopyRight 2018-2019 实验室设备网 版权所有 |